<template>
  <div class="container">
    <div id="box">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <p>加载中....</p>
  </div>
</template>

<script>
export default {
  name: "myLoading",
};
</script>

<style lang="scss" scoped>
.container {
  height: calc(100% - 30px);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  p{
    font-size: 18px;
    text-align: center;
  }
}
#box {
  height: 100%;
  width: 100%;
  background: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#box div {
  width: 30px;
  height: 100px;
  //   float: left;
  margin: 15px;
  background-color: gold;
  border-radius: 15px;
  animation: loading 500ms ease infinite alternate;
}
#box div:nth-child(1) {
  background-color: red;
}
#box div:nth-child(2) {
  background-color: green;
  animation-delay: 100ms;
}
#box div:nth-child(3) {
  background-color: pink;
  animation-delay: 200ms;
}

#box div:nth-child(4) {
  background-color: lightgreen;
  animation-delay: 300ms;
}

#box div:nth-child(5) {
  background-color: lightblue;
  animation-delay: 400ms;
}

@keyframes loading {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1, 0.5);
  }
}
</style>